<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { ref } from 'vue'
import { saveUserInfoUsingPost } from '@/services/login'
import type { LoginResult } from '@/types/member'

const memberStore = useMemberStore()
const avatarUrl = ref(memberStore.profile?.avatarUrl)
const nickName = ref(memberStore.profile?.nickName)

const bindblur = (e) => {
  nickName.value = e.detail.value // 更新昵称
}

const bindinput = (e) => {
  nickName.value = e.detail.value
}

const onChooseavatar = (e) => {
  const { avatarUrl: selectedAvatarUrl } = e.detail
  avatarUrl.value = selectedAvatarUrl
  console.log(avatarUrl.value)
}
const onSubmit = async () => {
  memberStore.setProfileField('avatarUrl', avatarUrl.value)
  memberStore.setProfileField('nickName', nickName.value)
  await saveUserInfoUsingPost({
    openid: memberStore.getProfileField('openid'),
    avatarUrl: avatarUrl.value,
    nickName: nickName.value,
  } as LoginResult)
  uni.showToast({ title: '保存成功' })
  // 页面跳转并刷新
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/my/my',
      success: () => {
        const page = getCurrentPages().find((page) => page.route === 'pages/my/my')
        if (page) {
          page.onLoad && page.onLoad()
        }
      },
    })
  }, 500)
}
</script>

<template>
  <view class="info-container">
    <view class="myInfo">
      <!-- 头像字段 -->
      <view class="field avatar-field">
        <text class="label">头像</text>
        <view class="avatar-content">
          <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
            <image :src="avatarUrl" class="avatar-icon"></image>
          </button>
        </view>
        <uni-icons type="right" size="10"></uni-icons>
      </view>

      <!-- 昵称字段 -->
      <view class="field nickname-field">
        <text class="label">昵称</text>
        <view class="nickname-content">
          <input
            :clearable="false"
            type="nickname"
            class="weui-input"
            :value="nickName"
            @blur="bindblur"
            placeholder="微信用户"
            @input="bindinput"
          />
        </view>
        <uni-icons type="right" size="10"></uni-icons>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button" @tap="onSubmit">保存</view>
  </view>
</template>

<style lang="scss">
.info-container {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx; /* 改用rpx单位 */
  box-sizing: border-box;
  min-height: 100vh;
}

.myInfo {
  display: flex;
  flex-direction: column;
  gap: 40rpx; /* 改用rpx单位 */
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 2rpx solid #eaeaea; /* 改用rpx单位 */
  margin-top: -10rpx;
}

.label {
  color: #333;
  font-size: 28rpx; /* 改用rpx单位 */
  text-align: left;
  width: 160rpx; /* 改用rpx单位 */
  flex-shrink: 0; /* 防止标签被压缩 */
}

.avatar-field {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nickname-field {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -10px; /* 将昵称部分向上移动 */
}

.avatar-content {
  display: flex;
  justify-content: flex-end; /* 头像部分右对齐 */
  align-items: center;
  flex-grow: 1;
}

.avatar-content button {
  background-color: transparent; /* 去掉按钮的背景色 */
  border: none; /* 去掉按钮的边框 */
  padding: 0; /* 去掉按钮的内边距 */
  margin-left: auto; /* 确保按钮右对齐 */
  margin-right: 0; /* 保证按钮完全靠右 */
  line-height: normal; /* 修复按钮文字位置 */
}

.avatar-content button:active {
  background-color: transparent; /* 按钮点击时也去掉背景色 */
}

.avatar-icon {
  width: 80rpx; /* 改用rpx单位 */
  height: 80rpx; /* 改用rpx单位 */
  border-radius: 50%; /* 圆形 */
  border: none; /* 去除边框 */
  background-color: transparent; /* 背景透明，避免灰色背景 */
}

.nickname-content {
  flex-grow: 1; /* 让输入框占满剩余空间 */
  margin-right: 20rpx; /* 添加右边距 */
}

.nickname-content input {
  width: 100%;
  padding: 0;
  font-size: 32rpx; /* 改用rpx单位 */
  line-height: 72rpx; /* 改用rpx单位 */
  border: none;
  outline: none;
  height: 72rpx; /* 改用rpx单位 */
  box-sizing: border-box;
  display: inline-block;
  text-align: right; /* 右对齐输入框内容 */
}

.uni-icons {
  margin-left: 20rpx; /* 改用rpx单位 */
  color: #999; /* 设置图标颜色 */
  display: flex; /* 确保它在flex容器内 */
  align-items: center; /* 让图标与输入框垂直对齐 */
  flex-shrink: 0; /* 防止图标被压缩 */
}

.save-button {
  width: 50%; /* 设置按钮宽度为 80%，可以根据需求调整 */
  margin: 40rpx auto; /* 改用rpx单位 */
  padding: 24rpx 0; /* 改用rpx单位 */
  text-align: center; /* 确保按钮文本居中 */
  background-color: #28bb9c;
  color: white; /* 设置按钮文本颜色 */
  border-radius: 10rpx; /* 改用rpx单位 */
  font-size: 32rpx; /* 改用rpx单位 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
}
</style>
